<template>
  <div>
    <customDetailsTopbar title="能源项目详情" flag @back="back" />
    <div class="d-scroll listInner px-1">
      <div class="py-1 px-1 bg-white">
        <template>
          <customTitle :is-line="true" bg-color="#3795ff" title="项目基本信息" />
          <div ref="xmjbxx" class="xmjbxx">
            <div v-for="(it) in descList1" :key="it.label + '项目基本信息'">
              <custom-details-item :icon="it.icon" :label="it.label">
                <template #valueSlot>
                  <span v-if="it.label !== '附件' && it.label !== '合同文本'">{{ it.value }}</span>
                  <div v-else>
                    <el-link type="primary" @click="handleDownLoad(it.fileUuid)">{{ it.value }}</el-link>
                  </div>
                </template>
              </custom-details-item>
            </div>
          </div>
        </template>
        <template v-if="projectsType.includes('节能技改项目')">
          <customTitle :is-line="true" bg-color="#3795ff" title="节能技改项目信息" />
          <div ref="jnjgxmxx" class="jnjgxmxx">
            <div v-for="(it) in descList2" :key="it.label + '节能技改项目'">
              <custom-details-item :icon="it.icon" :label="it.label">
                <template #valueSlot>
                  <span v-if="it.label !== '附件' && it.label !== '合同文本'">{{ it.value }}</span>
                  <div v-else>
                    <el-link type="primary" @click="openAttachPopUp(getFileList('节能技改项目信息'),'attachPopUp')">查看</el-link>
                    <!--                  <el-link v-for="file,fileIndex in getFileList('节能技改项目信息')" :key="fileIndex" type="primary" @click="handleDownLoad(file.attachUuid)">{{ file.attachName }}</el-link>-->
                  </div>
                </template>
              </custom-details-item>
            </div>
          </div>
        </template>
        <template v-if="projectsType.includes('合同能源管理项目')">
          <customTitle :is-line="true" bg-color="#3795ff" title="合同能源项目信息" />
          <div ref="htnyxx" class="htnyxx">
            <div v-for="(it) in descList3" :key="it.label + '合同能源管理项目'">
              <custom-details-item :icon="it.icon" :label="it.label">
                <template #valueSlot>
                  <span v-if="it.label !== '附件' && it.label !== '合同文本'">{{ it.value }}</span>
                  <div v-else>
                    <el-link type="primary" @click="openAttachPopUp(getFileList('合同能源项目信息'),'attachPopUpTwo')">查看</el-link>
                    <!--                  <el-link v-for="file,fileIndex in getFileList('合同能源项目信息')" :key="fileIndex" type="primary" @click="handleDownLoad(file.attachUuid)">{{ file.attachName }}</el-link>-->
                  </div>
                </template>
              </custom-details-item>
            </div>
          </div>
        </template>
        <template v-if="projectsType.includes('光伏项目')">
          <customTitle :is-line="true" bg-color="#3795ff" title="光伏项目信息" />
          <div ref="gfxm" class="gfxm">
            <div v-for="(it) in descList4" :key="it.label">
              <custom-details-item :icon="it.icon" :label="it.label">
                <template #valueSlot>
                  <span v-if="it.label !== '附件' && it.label !== '合同文本'">{{ it.value }}</span>
                  <div v-else>
                    <el-link type="primary" @click="openAttachPopUp(getFileList('光伏项目信息'),'attachPopUpThree')">查看</el-link>
                    <!--                  <el-link v-for="(file,fileIndex) in getFileList('光伏项目信息')" :key="fileIndex" type="primary" @click="handleDownLoad(file.attachUuid)">{{ file.attachName }}</el-link>-->
                  </div>
                </template>
              </custom-details-item>
            </div>
          </div>
        </template>
        <template v-if="projectsSchedule === '已验收'">
          <customTitle :is-line="true" bg-color="#3795ff" title="项目验收评估信息" />
          <div ref="xmyspgxx" class="xmyspgxx">
            <div v-for="(it) in descList5" :key="it.label + '已验收'">
              <custom-details-item :icon="it.icon" :label="it.label">
                <template #valueSlot>
                  <span v-if="it.label !== '附件' && it.label !== '合同文本'">{{ it.value }}</span>
                  <div v-else>
                    <el-link type="primary" @click="openAttachPopUp(getFileList('项目验收评估信息'),'attachPopUpFourth')">查看</el-link>
                    <!--                  <el-link v-for="file,fileIndex in getFileList('项目验收评估信息')" :key="fileIndex" type="primary" @click="handleDownLoad(file.attachUuid)">{{ file.attachName }}</el-link>-->
                  </div>
                </template>
              </custom-details-item>
            </div>
          </div>
        </template>
      </div>
    </div>
    <attachPopUp ref="attachPopUp" file-name-key="fileName" file-url-key="fileUrl" />
    <attachPopUp ref="attachPopUpTwo" file-name-key="fileName" file-url-key="fileUrl" />
    <attachPopUp ref="attachPopUpThree" file-name-key="fileName" file-url-key="fileUrl" />
    <attachPopUp ref="attachPopUpFourth" file-name-key="fileName" file-url-key="fileUrl" />
  </div>
</template>

<script>
import { energyProjectsById } from '@/api/energySources'
import commonList from '@/assets/mixin/commonList'

export default {
  mixins: [commonList],
  inject: ['layout'],
  data() {
    return {
      loadArr: [],
      descList1: [
        { label: '项目名称', value: '', fieldName: 'projectsName', icon: '&#xe790;' },
        { label: '企业名称', value: '', fieldName: 'companyName', icon: '&#xe8d5;' },
        { label: '行业类别', value: '', fieldName: 'industryType', icon: '&#xe634;' },
        { label: '所属年份', value: '', fieldName: 'years', icon: '&#xe8d5;' },
        { label: '项目类型', value: '', fieldName: 'projectsType', icon: '&#xe61c;' },
        { label: '项目进度', value: '', fieldName: 'projectsSchedule', icon: '&#xe61c;' }
      ],
      descList2: [
        { label: '项目主要内容', value: '', fieldName: 'projectContent', icon: '&#xe790;' },
        { label: '项目总投资（万元）', value: '', fieldName: 'projectInvestment', icon: '&#xe8d5;' },
        { label: '节能技改投资（万元）', value: '', fieldName: 'energySavingInvestment', icon: '&#xe634;' },
        { label: '预计节能量（吨标准煤/年）', value: '', fieldName: 'expectedEnergySaving', icon: '&#xe61c;' },
        // { label: '实际节能量（吨标准煤/年）', value: '', fieldName: 'energySaving', icon: '&#xe61c;' },
        { label: '预计节约费用（万元/年）', value: '', fieldName: 'expectedCostSavings', icon: '&#xe61c;' },
        { label: '计划开始时间', value: '', fieldName: 'planStartTime', icon: '&#xe61c;' },
        { label: '计划结束时间', value: '', fieldName: 'planEndTime', icon: '&#xe61c;' },
        { label: '项目联系人', value: '', fieldName: 'projectContacts', icon: '&#xe61c;' },
        { label: '联系电话', value: '', fieldName: 'telphone', icon: '&#xe61c;' },
        // { label: '项目实施进度', value: 'projectsSchedule', icon: '&#xe61c;' },
        { label: '附件', value: '', fieldName: 'energyAttachName', uuid: 'files', filesIndex: 0, icon: '&#xe61c;' }
      ],
      descList3: [
        { label: '合同名称', value: '', fieldName: 'contractName', icon: '&#xe790;' },
        { label: '合同能源项目类型', value: '', fieldName: 'energyType', icon: '&#xe8d5;' },
        { label: '合同开始时间', value: '', fieldName: 'contractStratTime', icon: '&#xe634;' },
        { label: '合同结束时间', value: '', fieldName: 'contractEndTime', icon: '&#xe61c;' },
        { label: '合同签订金额', value: '', fieldName: 'signingAmount', icon: '&#xe61c;' },
        { label: '能源服务公司名称', value: '', fieldName: 'energyCompanyName', icon: '&#xe61c;' },
        { label: '合同文本', value: '', fieldName: 'contractAttachName', uuid: 'files', filesIndex: 1, icon: '&#xe61c;' }
        // { label: '上传时间', value: 'contractAttachTime', icon: '&#xe61c;' }
      ],
      descList4: [
        // { label: '项目名称', value: 'projectsName', icon: '&#xe790;' },
        // { label: '年份', value: 'years', icon: '&#xe8d5;' },
        { label: '装机容量（MV）', value: '', fieldName: 'installedCapacity', icon: '&#xe634;' },
        { label: '项目类别', value: '', fieldName: 'projectCategory', icon: '&#xe61c;' },
        { label: '项目金额（万元）', value: '', fieldName: 'projectAmount', icon: '&#xe61c;' },
        { label: '计划开始时间', value: '', fieldName: 'photovoltaicStartTime', icon: '&#xe61c;' },
        { label: '计划结束时间', value: '', fieldName: 'photovoltaicEndTime', icon: '&#xe61c;' },
        { label: '项目联系人', value: '', fieldName: 'photovoltaicContacts', icon: '&#xe61c;' },
        { label: '联系电话', value: '', fieldName: 'photovoltaicTelphone', icon: '&#xe61c;' },
        { label: '附件', value: '', fieldName: 'photovoltaicAttachName', uuid: 'files', filesIndex: 2, icon: '&#xe61c;' }
        // { label: '项目实施进度', value: 'projectsSchedule', icon: '&#xe61c;' },
        // { label: '能源服务公司名称', value: 'energyCompanyName', icon: '&#xe61c;' }
      ],
      descList5: [
        // { label: '项目名称', value: 'projectsName', icon: '&#xe790;' },
        // { label: '年份', value: 'years', icon: '&#xe8d5;' },
        { label: '评估时间', value: '', fieldName: 'evaluationTime', icon: '&#xe634;' },
        { label: '评估单位', value: '', fieldName: 'evaluationCompany', icon: '&#xe61c;' },
        { label: '实际节能量（吨标煤/年）', value: '', fieldName: 'energySaving', icon: '&#xe61c;' },
        { label: '实际节省费用（万元/年）', value: '', fieldName: 'costSavings', icon: '&#xe61c;' },
        { label: '附件', value: '', fieldName: 'projectAttachName', uuid: 'files', filesIndex: 3, icon: '&#xe61c;' }
      ],
      fileList: [],
      projectsSchedule: '',
      id: '',
      projectsType: '',
      current: ''
    }
  },
  computed: {
    getFileList() {
      return (name) => {
        return this.fileList.find(v => { return v.attachType === name })?.files
      }
    }
  },
  mounted() {
    const { projectsSchedule, id, projectsType, current } = this.$route.query
    this.projectsSchedule = projectsSchedule || ''
    this.id = id
    this.projectsType = projectsType
    this.current = current
    if (this.projectsSchedule === '已验收') {
      const dIndex = this.$ldh.findIndex(this.descList2, { 'label': '预计节约费用（万元/年）' })
      console.log(dIndex)
      this.descList2.splice(dIndex, 0, {
        label: '实际节能量（吨标准煤/年） ',
        value: '',
        fieldName: 'energySaving',
        icon: '&#xe61c;',
        hidden: true
      }, {
        label: '实际节约费用（万元/年）',
        value: '',
        fieldName: 'costSavings',
        icon: '&#xe61c;',
        hidden: true
      })
    }
    this.$nextTick(() => {
      this.energyProjectsById()
    })
  },
  methods: {
    back() {
      this.loadArr = []
      this.$router.back()
    },
    async energyProjectsById() {
      const resArr = ['.xmjbxx', '.gfxm', '.xmyspgxx', '.htnyxx', '.jnjgxmxx']
      resArr.forEach(item => {
        const targetItem = item.split('.')[1]
        if (this.$refs[targetItem]) {
          this.loadArr.push(item)
        }
      })
      this.layout.showAreaLoading(this.loadArr)
      // this.layout.showAreaLoading(['.xmjbxx', '.gfxm', '.xmyspgxx', '.htnyxx', '.jnjgxmxx'])
      const { status, data } = await energyProjectsById({ id: this.id })
      if (status === 0 && data) {
        if (status === 0 && data) {
          this.descList1.forEach(v => {
            v.value = data[v.fieldName] ?? ''
          })
          this.descList2.forEach(v => {
            v.value = data[v.fieldName] ?? ''
            if (v.isFile) {
              v.fileUuid = data[v.fieldUuidName] ?? ''
            }
          })
          this.descList3.forEach(v => {
            v.value = data[v.fieldName] ?? ''
            if (v.isFile) {
              v.fileUuid = data[v.fieldUuidName] ?? ''
              v.fileTime = data[v.fileTimeName] ?? ''
            }
            if (v.fieldName === 'signingAmount') {
              v.value = v.value ? v.value + '万元' : ''
            }
          })
          this.descList4.forEach(v => {
            v.value = data[v.fieldName] ?? ''
            if (v.isFile) {
              v.fileUuid = data[v.fieldUuidName] ?? ''
            }
          })
          this.descList5.forEach(v => {
            v.value = data[v.fieldName] ?? ''
            if (v.isFile) {
              v.fileUuid = data[v.fieldUuidName] ?? ''
            }
          })
          this.fileList = data.files
        }
      }
      this.layout.hideAreaLoading(this.loadArr)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
